Raycasting এবং Picking Events গাইড ও নোট

Raycasting এবং Picking Events হল 3D গ্রাফিক্সের অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারী ইন্টারঅ্যাকশন এবং ডাইনামিক অবজেক্ট সিলেকশন সহজ করে তোলে। এই টেকনোলজিগুলোর মাধ্যমে আপনি ব্যবহারকারীর ক্লিক বা টাচ থেকে সঠিক অবজেক্ট নির্বাচন করতে পারেন, যা গেম এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশনে কার্যকরী।

BabylonJS এ Raycasting এবং Picking Events ব্যবহার করা অত্যন্ত সহজ এবং শক্তিশালী। এই গাইডে, আমরা বুঝে নেব কিভাবে Raycasting এবং Picking Events কাজ করে এবং কীভাবে এগুলো BabylonJS-এ ব্যবহার করা যায়।

১. Raycasting কী?

Raycasting হল একটি প্রযুক্তি যেখানে একটি "রশ্মি" (ray) 3D স্পেসে একটি নির্দিষ্ট দিক বা স্থান থেকে ছোড়া হয় এবং এটি পথের মধ্যে আসা অবজেক্টের সাথে সংঘর্ষ (collision) পরীক্ষা করে। সাধারণত, রশ্মিটি কোনো স্পেসিফিক পজিশন বা ক্যামেরা থেকে নির্দিষ্ট দিকের দিকে ছোড়া হয় এবং এটি ক্লিক বা টাচ ইন্টারঅ্যাকশন সনাক্ত করার জন্য ব্যবহৃত হয়।

Raycasting সাধারণত ব্যবহৃত হয়:

• অবজেক্ট নির্বাচন (Picking)
• ক্যামেরা বা লাইটের দিক নির্ধারণ
• কাস্টম ইন্টারঅ্যাকশন এবং কন্ট্রোল

Raycasting উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// Raycasting (রশ্মি পাঠানো)
var ray = new BABYLON.Ray(camera.position, camera.getTarget().subtract(camera.position).normalize());
var hit = scene.pickWithRay(ray);

// যদি রশ্মি কোনো অবজেক্টকে হিট করে
if (hit.pickedMesh) {
    console.log("Hit: ", hit.pickedMesh.name);
}

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• Ray: BABYLON.Ray ব্যবহার করা হয়েছে, যা একটি রশ্মি তৈরি করে যা ক্যামেরার অবস্থান থেকে নির্দিষ্ট দিকের দিকে চলে।
• pickWithRay: এই ফাংশনটি রশ্মির পথের মধ্যে কোনো অবজেক্ট আছে কিনা তা পরীক্ষা করে।
• hit.pickedMesh: যদি কোনো অবজেক্ট হিট হয়, তবে এটি সিলেক্টেড অবজেক্টকে রিটার্ন করবে।

২. Picking Events কী?

Picking Events হল এমন ইন্টারঅ্যাকশন যেখানে ব্যবহারকারী ক্লিক বা টাচ করে 3D দৃশ্যের কোনো নির্দিষ্ট অবজেক্ট নির্বাচন করতে পারে। Picking এর মাধ্যমে, আপনি ক্লিক বা টাচের মাধ্যমে কোন অবজেক্টে কাজ করতে চান তা নির্ধারণ করতে পারবেন।

Picking Events উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 1; // বক্সের অবস্থান

// Picking Event (ক্লিক ইভেন্ট)
canvas.addEventListener("pointerdown", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY); // পিকিং রেজাল্ট
    if (pickResult.pickedMesh) {
        // যদি কোনো মেশ পিক হয়
        alert("Picked Mesh: " + pickResult.pickedMesh.name);
    }
});

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• scene.pick: এই ফাংশনটি ব্যবহারকারী ক্লিকের অবস্থান থেকে দৃশ্যের মধ্যে একটি "পিক" অপারেশন চালায় এবং এটি কোন অবজেক্ট নির্বাচিত হয়েছে তা নির্ধারণ করে।
• evt.clientX, evt.clientY: ক্লিকের স্থান (এক্স এবং ওয়াই) কে সনাক্ত করে, যেখানে পিকিং করতে হবে।
• pickResult.pickedMesh: এটি নির্বাচিত মেশকে রিটার্ন করবে, যদি ক্লিক করা হয়।

৩. Raycasting এবং Picking Event এর মধ্যে পার্থক্য

• Raycasting: একটি নির্দিষ্ট রশ্মি থেকে চলমান অবজেক্টের সাথে সংঘর্ষ নির্ধারণ করে। এটি মূলত একটি লজিক্যাল প্রক্রিয়া, যা সাধারনত ক্যামেরার দিক থেকে অবজেক্ট সিলেক্ট করার জন্য ব্যবহৃত হয়।
• Picking Events: এটি ব্যবহারকারীর ক্লিক বা টাচ ইন্টারঅ্যাকশনের মাধ্যমে দৃশ্যের অবজেক্ট নির্বাচন করতে ব্যবহৃত হয়। Picking সাধারণত সরাসরি ইউজার ইন্টারঅ্যাকশন (যেমন ক্লিক) ঘটায় এবং এটি রিয়েল-টাইমে কাজ করে।

৪. Raycasting এবং Picking এর উন্নত ব্যবহার

Multiple Objects Picking:

যদি একাধিক অবজেক্ট থাকে এবং আপনি প্রতিটি অবজেক্টের জন্য পৃথক ইভেন্ট করতে চান, তবে আপনি Picking ইভেন্ট ব্যবহার করতে পারেন যাতে বিভিন্ন অবজেক্টে আলাদা কাজ করা যায়।

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// একাধিক বক্স তৈরি করা
var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position.x = -3;

var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
box2.position.x = 3;

// Picking Event (ক্লিক ইভেন্ট)
canvas.addEventListener("pointerdown", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY); // পিকিং রেজাল্ট
    if (pickResult.pickedMesh) {
        // যদি কোনো মেশ পিক হয়
        alert("Picked Mesh: " + pickResult.pickedMesh.name);
    }
});

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• এখানে দুটি বক্স তৈরি করা হয়েছে এবং ব্যবহারকারী যেকোনো একটি বক্সে ক্লিক করলে সেই বক্সের নাম দেখা যাবে।

সারাংশ

• Raycasting: একটি রশ্মি পাঠানো হয় এবং এটি 3D স্পেসে অবজেক্টের সাথে সংঘর্ষ পরীক্ষা করে। এটি সাধারণত ক্যামেরা দিক থেকে ব্যবহারকারীর নির্বাচন নির্ধারণ করতে ব্যবহৃত হয়।
• Picking Events: এটি ইউজারের ক্লিক বা টাচের মাধ্যমে 3D দৃশ্যের অবজেক্ট নির্বাচন করতে সাহায্য করে।
• BabylonJS এ Raycasting এবং Picking ইভেন্ট খুবই শক্তিশালী টুলস যা আপনাকে 3D গ্রাফিক্সে ইন্টারঅ্যাকটিভিটি যোগ করতে সাহায্য করে।